<template>
  <div class="cui_bd">
    <div class="reg_wrap hh_reg_wrap">
      <ul class="reg_step ">
        <li class="current" id="verifyType"><span></span>验证手机</li>
        <li class="current"><span></span>设置密码</li>
        <li><span></span>注册成功</li>
      </ul>
      <div class="reg_form reg_form_step1">
        <dl>
          <dt class="label" id="regType">注册手机号</dt>
          <dd>
            <div class="r_input input_noborder" id="showVal">86-{{phone}}</div>
          </dd>
        </dl>

        <dl>
          <dt class="label">密码</dt>
          <dd><input class="r_input input_l bbz-js-iconable-input" :type="type1" placeholder="8-20位字母、数字和符号(_#@)" id="password1" v-model="password1" maxlength="20">
            <i :class="['iconfont',{'icon-eye-close':!eyeShow},{'icon-eye':eyeShow}]" @click="eyeShow=true;type1='text'"></i>
          </dd>
          <dd>
            <ul class="box_pas_safety">
              <li id="strongPwd1" :class="{'bgColor':EXPPassWord>=1}">弱</li>
              <li id="strongPwd2" :class="{'bgColor':EXPPassWord>=2}">中</li>
              <li id="strongPwd3" :class="{'bgColor':EXPPassWord>=3}">强</li>
            </ul>
          </dd>
        </dl>
        <div class="base_error" id="errPassword" v-html="text1"></div>

        <dl>
          <dt class="label">确认密码</dt>
          <dd><input class="r_input input_l bbz-js-iconable-input" :type="type2" placeholder="再次输入密码" id="password2" v-model="password2" maxlength="20">
            <i :class="['iconfont',{'icon-eye-close':!eyeShow1},{'icon-eye':eyeShow1}]" @click="eyeShow1=true;type2='text'"></i>
          </dd>
          <!--输入框报错样式请加上类名input_error-->
        </dl>
        <div class="base_successs" id="errRepassword" v-if="isSame">两次输入的密码一致</div>
        <div class="base_error" id="errRepassword" v-else-if="password2.length>1&&!isSame">两次输入的密码不一致</div>

        <dl class="form_space">
          <dt class="label">&nbsp;</dt>
          <dd><input class="reg_btn" type="submit" value="完成" id="registerbtn" @click="submitData"><br>
            <a id="pwdQuestionUrl" target="_blank" href="http://help.ctrip.com/QuestionList.aspx?parentId=1&amp;directoryId=12">注册遇到问题？</a>
          </dd>
        </dl>
        <a class="go_prev-step" id="back" href="javascript: window.history.back();"><span>&lt;</span> 返回上一步</a>
      </div>
      <input type="hidden" id="page_id" value="">
      <input type="hidden" id="mobile" value="">
      <input type="hidden" id="email" value="">
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'RegisterPassword',
  data() {
    return {
      eyeShow: false,
      eyeShow1: false,
      type1: 'password',
      type2: 'password',
      password1: '',
      password2: '',
      text1: ''
    }
  },
  computed: {
    EXPPassWord() {
      const reg = /(?!\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{8,20}/
      return this.password1.length > 8 && this.password1.length < 12 ? 1 : this.password1.length > 12 && this.password1.length < 16 && reg.test(this.password1) ? 2 : this.password1.length > 16 && reg.test(this.password1) ? 3 : ''
    },
    isSame() {
      return this.password1 == this.password2 && this.password1 != '' && this.password2 != '' ? true : false
    },
    ...mapState({
      phone: state => {
        return String(state.register.phone).slice(0, 3) + '****' + String(state.register.phone).slice(7)
      }
    }),
    ...mapState({
      afterphone: state => {
        return state.register.phone
      }
    })
  },
  methods: {
    submitData() {
      console.log(this.EXPPassWord)
      if (this.EXPPassWord == 1) {
        this.text1 = '密码强度弱，请重新写一个'
      }
      if (this.EXPPassWord == 2 || this.EXPPassWord == 3) {
        this.$store.dispatch('changeShowNum', {
          num: 3,
          password: this.password1,
          phone: this.afterphone
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.base_successs {
  color: #96ce5d;
  font-size: 15px;
  padding-left: 150px;
}
.base_error {
  color: red;
  font-size: 16px;
  padding-left: 150px;
}
.bgColor {
  background-color: #96ce5d !important;
}
.icon-eye-close {
  font-size: 20px;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}
.icon-eye {
  font-size: 20px;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}
.cui_bd {
  margin: 20px auto;
  width: 1000px;
  padding: 0 10px;
  min-height: 500px;
  font-size: 12px;
}
.r_input {
  height: 24px;
  padding: 5px;
  line-height: 24px;
  border: 1px solid #ddd;
  font-size: 15px;
  color: #bbb;
}
.hh_reg_wrap {
  padding: 0;
  position: relative;
  z-index: 1;
  min-height: 350px;
  overflow: hidden;
  .reg_step {
    margin: 0 0 30px -12px;
    span {
      display: inline-block;
      margin-right: 5px;
      height: 5px;
      line-height: 0;
      border-radius: 3px;
      vertical-align: middle;
      background-color: #ddd;
      width: 270px;
      overflow: hidden;
    }
    li {
      display: inline-block;
      background: url('../assets/images/un_reg_7.4.png') 0 -9999em no-repeat;
      vertical-align: middle;
      float: left;
      margin-left: 12px;
      background-position: 256px -285px;
      color: #9a9a9a;
      &.current {
        background-position: 255px -228px;
        color: #799d08;
        span {
          background-color: #acd252;
        }
      }
    }
  }
  .reg_form {
    dl {
      padding: 10px 0;
      clear: both;
      &:after {
        height: 0;
        overflow: hidden;
        content: '.';
        clear: both;
        display: block;
      }
    }
    dt {
      float: left;
      margin-right: 10px;
      width: 130px;
      line-height: 36px;
      font-size: 14px;
      text-align: right;
    }
    dd {
      float: left;
      padding-right: 10px;
      position: relative;
      .r_input {
        position: relative;
        width: 283px;
        height: 28px;
        line-height: 28px;
        padding-left: 10px;
        vertical-align: middle;
        font-size: 14px;
        color: #333;
        border-color: #ccc;
        &.input_noborder {
          border: none;
        }
      }
      .box_pas_safety {
        margin-top: 3px;
        li {
          float: left;
          height: 26px;
          line-height: 26px;
          padding: 0 16px;
          border-right: 1px solid #fff;
          background-color: #f1d0b9;
          color: #fff;
          .curr {
            background-color: #ff893a;
          }
        }
      }
      .reg_btn {
        background-color: #ff9a14;
        -webkit-appearance: none;
        margin-bottom: 8px;
        width: 220px;
        height: 42px;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        text-align: center;
        border: 0;
        border-radius: 4px;
        clear: both;
      }
    }
    .go_prev-step {
      display: inline-block;
      margin: 50px 0 0 140px;
      font-size: 14px;
      color: #666;
      span {
        font-family: simsun;
      }
    }
  }
}
</style>